{include file='public:header-css'/}
<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        {include file='public:left-menu'/}
        <!--End 左侧导航-->
        <!--头部信息-->
        {include file='public:nav-header' title="商品管理" subTitle="添加编辑认养商品"/}
        <!--End 头部信息-->
        <!--页面主要内容-->
        <main class="lyear-layout-content" id="app">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <ul class="nav nav-tabs page-tabs">
                                <li class="active" data-id="info"><a href="javascript:;">商品信息</a></li>
                                <li data-id="photos"><a href="javascript:;">商品相册</a></li>
                            </ul>
                            <div class="tab-content">
                                <form method="post" id="submit-form" class="row">
                                    <div>
                                        <div id="info">
                                            <div class="form-group col-md-12">
                                                <label class="form-title"><em class="require">*</em>商品名称</label>
                                                <input type="text" class="form-control" name="goods_name"
                                                       value="{$info.goods_name}" placeholder="请输入商品名称"/>
                                                <span class="error" id="err_goods_name"></span>
                                            </div>
                                            <div class="form-group col-md-12">
                                                <label class="form-title">商品简介</label>
                                                <textarea class="form-control" name="goods_remark" rows="3"
                                                          placeholder="请输入商品简介">{$info.goods_remark}</textarea>
                                            </div>
                                            <div class="form-group col-md-12">
                                                <label class="form-title">商品货号</label>
                                                <input type="text" class="form-control" name="goods_sn"
                                                       value="{$info.goods_sn}" placeholder="请输入商品货号"/>
                                                <span class="help">如果不填会自动生成</span>
                                            </div>
                                            <div class="row" style="padding: 0 15px">
                                                <div class="form-group col-md-4">
                                                    <div class="form-inline">
                                                        <span class="tit"><em class="require">*</em>所属分类</span>
                                                        <select class="input-group-select" name="cat_id_1">
                                                            {volist name="$cate_list" id="cate"}
                                                            <option value="{$cate.id}" {if $info.cat_id_1==$cate.id}selected{/if}>{$cate.name}</option>
                                                            {/volist}
                                                        </select>
                                                    </div>
                                                    <span class="error" id="err_cat_id_1"></span>
                                                </div>
                                                <div class="form-group col-md-4">
                                                    <div class="form-inline">
                                                        <span class="tit"><em class="require">*</em>收益钱包</span>
                                                        <select class="input-group-select" name="wid">
                                                            {volist name="$wallet" id="wallet1"}
                                                            <option value="{$wallet1.id}" {if $info.wid==$wallet1.id}selected{/if}>{$wallet1.name}</option>
                                                            {/volist}
                                                        </select>
                                                    </div>
                                                    <span class="error" id="err_wid"></span>
                                                </div>
                                                <div class="form-group col-md-4">
                                                    <div class="form-inline">
                                                        <span class="tit"><em class="require">*</em>额外收益</span>
                                                        <select class="input-group-select" name="extra_wid" v-model="extra_wid">
                                                            <option value="0">无</option>
                                                            {volist name="$wallet" id="wallet1"}
                                                            <option value="{$wallet1.id}">{$wallet1.name}</option>
                                                            {/volist}
                                                        </select>
                                                    </div>
                                                    <span class="error" id="err_extra_wid"></span>
                                                </div>
                                            </div>
                                            <div class="form-group" style="padding: 0 15px" v-show="extra_wid>0">
                                                <label class="form-title"><em class="require">*</em>额外收益</label>
                                                <div class="row" style="margin-bottom: 5px">
                                                    <div class="col-md-6" v-for="(item,index) in foster_goods_extra" :key="item.id">
                                                        <div class="input-group input-group-flex">
                                                            <input type="text" class="form-control lq_time" @click="showTime(index)" v-model="item.lq_time" readonly :name="`extra_text[${index}][lq_time]`" placeholder="请选择领取时间"/>
                                                            <input type="text" class="form-control" v-model="item.number" :name="`extra_text[${index}][number]`" placeholder="请输入金额"/>
                                                            <div class="input-group-btn">
                                                                <button class="btn btn-default" @click="del(index)" type="button"><i class="mdi mdi-close"></i></button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <span class="error" id="err_extra_text"></span>
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="input-group-btn">
                                                            <button @click="addInfo()" class="btn btn-default" type="button">添加额外收益</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row" style="padding: 0 15px">
                                                <div class="form-group col-md-3">
                                                    <label class="form-title"><em class="require">*</em>商品价格</label>
                                                    <input type="text" class="form-control" name="goods_price"
                                                           value="{$info.goods_price}" placeholder="请输入商品价格"/>
                                                    <span class="error" id="err_goods_price"></span>
                                                </div>
                                                <div class="form-group col-md-3">
                                                    <label class="form-title"><em class="require">*</em>成本价格</label>
                                                    <input type="text" class="form-control" name="cost_price"
                                                           value="{$info.cost_price}" placeholder="请输入成本价格"/>
                                                    <span class="error" id="err_cost_price"></span>
                                                </div>
                                                <div class="form-group col-md-3">
                                                    <label class="form-title"><em class="require">*</em>限购数量</label>
                                                    <input type="text" class="form-control" name="buy_max"
                                                           value="{$info.buy_max}" placeholder="请输入限购数量"/>
                                                    <span class="error" id="err_buy_max"></span>
                                                </div>
                                                <div class="form-group col-md-3">
                                                    <label class="form-title"><em class="require">*</em>加速释放</label>
                                                    <input type="text" class="form-control" name="re_speed"
                                                           value="{$info.re_speed}" placeholder="请输入加速 以,分割"/>
                                                    <span class="error" id="err_re_speed"></span>
                                                </div>
                                            </div>
                                            <div class="row" style="padding: 0 15px">
                                                <div class="form-group col-md-4">
                                                    <label class="form-title"><em class="require">*</em>每日收益</label>
                                                    <input type="text" class="form-control" name="day_sy"
                                                           value="{$info.day_sy}" placeholder="请输入每日收益"/>
                                                    <span class="error" id="err_day_sy"></span>
                                                </div>
                                                <div class="form-group col-md-4">
                                                    <label class="form-title"><em class="require">*</em>收益周期</label>
                                                    <input type="text" class="form-control" name="sy_day"
                                                           value="{$info.sy_day}" placeholder="请输入收益周期"/>
                                                    <span class="error" id="err_sy_day"></span>
                                                </div>
                                                <div class="form-group col-md-4">
                                                    <label class="form-title"><em class="require">*</em>产量</label>
                                                    <input type="text" class="form-control" name="yield"
                                                           value="{$info.yield}" placeholder="请输入产量"/>
                                                    <span class="error" id="err_yield"></span>
                                                </div>
                                            </div>
                                            <div class="row" style="padding: 0 15px">
                                                <div class="form-group col-md-4">
                                                    <label><em class="require">*</em>商品主图</label>
                                                    <div class="upload-row">
                                                        <img class="upload-img" id="goods_img"
                                                             src="{$info.goods_img|default='__STATIC__/images/upload.png'}">
                                                        <input type="hidden" name="goods_img" value="{$info.goods_img}">
                                                        <div class="input-group-btn">
                                                            <button onclick="GetUploadify(1,'goods_img','foster_goods','call_back')"
                                                                    class="btn btn-default" type="button">上传图片
                                                            </button>
                                                        </div>
                                                    </div>
                                                    <span class="error" id="err_goods_img"></span>
                                                </div>
                                                <div class="form-group col-md-4">
                                                    <label class="form-title"><em class="require">*</em>商品库存</label>
                                                    <input type="text" class="form-control" name="store_count"
                                                           value="{$info.store_count}" placeholder="请输入商品库存"/>
                                                    <span class="error" id="err_store_count"></span>
                                                </div>
                                                <div class="form-group col-md-4">
                                                    <label class="form-title"><em class="require">*</em>商品排序</label>
                                                    <input type="text" class="form-control" name="sort"
                                                           value="{$info.sort|default=50}" placeholder="请输入商品排序"/>
                                                    <span class="error" id="err_sort"></span>
                                                </div>
                                            </div>
                                            <div class="form-group col-md-12">
                                                <label class="form-title"><em class="require">*</em>商品详情</label>
                                                <textarea class="ueditor" id="content" name="goods_content"
                                                          placeholder="请输入商品详情">{$info.goods_content}</textarea>
                                                <span class="error" id="err_goods_content"></span>
                                            </div>
                                            <div class="form-group col-md-12">
                                                <label class="form-title"><em class="require">*</em>商品协议</label>
                                                <textarea class="ueditor" id="goods_agreement" name="goods_agreement"
                                                          placeholder="请输入商品协议">{$info.goods_agreement}</textarea>
                                                <span class="error" id="err_goods_agreement"></span>
                                            </div>
                                        </div>
                                        <div id="photos" style="display: none">
                                            <div class="form-group col-md-12">
                                                <div class="form-controls">
                                                    <div class="upload-row upload-images">
                                                        {volist name="$images" id="image"}
                                                        <div class="upload-row-item">
                                                            {if $image.type=='video'}
                                                            <video class="upload-video" src="{$image.src}" controls></video>
                                                            {else/}
                                                            <img class="upload-img" src="{$image.src|default='__STATIC__/images/upload.png'}">
                                                            {/if}
                                                            <input type="hidden" name="goods_imgs[]" value="{$image.src}">
                                                            <button type="button" onclick="shanchu(this)" class="btn btn-default"><span class="mdi mdi-close"></span></button>
                                                        </div>
                                                        {/volist}
                                                        <div class="input-group-btn add-pic">
                                                            <button onclick="GetUploadify(1,'','foster_goods','call_back2','imageVideo')" class="btn btn-default" type="button">上传图片/视频</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group col-md-12">
                                        <input type="hidden" name="{$info.pk}" value="{$info[$info.pk]}">
                                        <button type="button" class="btn-theme submit-btn">确定</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="choose_time" v-if="show">
                <div id="choose"></div>
            </div>
        </main>
        <!--End 页面主要内容-->
    </div>
</div>
<style>
    .input-group-flex{
        display: flex;
        align-items: flex-end;
        margin-bottom: 5px;
    }
    .input-group-flex .form-control{
        flex: 1;
    }
    .input-group-flex .form-control:nth-child(2){
        margin-left: -1px;
    }
    .input-group-flex .input-group-btn{
        width: auto;
    }
    .upload-row .left{
        margin-right: 10px;
        display: flex;
        align-items: center;
    }
    .upload-row .left .upload-img{
        margin-right: 0;
    }
    .upload-row .left .left-img{
        position: relative;
        margin-right: 5px;
    }
    .upload-row .left .left-img span{
        position: absolute;
        right: 2px;
        top: -2px;
        width: 20px;
        height: 20px;
        font-size: 20px;
        color: #4d5259;
    }
    .upload-row-item{
        position: relative;
    }
    .upload-row-item .upload-img{
        margin-right: 15px;
        width: 200px;
    }
    .upload-row-item .upload-video{
        margin-right: 15px;
        width: 200px;
    }
    .upload-row-item .btn-default{
        position: absolute;
        left: -10px;
        top: -10px;
        padding: 0;
        width: 20px;
        height: 20px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #choose_time{
        position: fixed;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        background: rgba(0,0,0,0.5);
        left: 0;
        top: 0;
        z-index: 10000;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>
{load href="__ADMIN__/plugin/Ueditor/ueditor.config.js"/}
{load href="__ADMIN__/plugin/Ueditor/ueditor.all.min.js"/}
{load href="__ADMIN__/plugin/Ueditor/lang/zh-cn/zh-cn.js"/}
{load href="__ADMIN__/js/jquery-tags-input/jquery.tagsinput.min.css"/}
{load href="__ADMIN__/js/jquery-tags-input/jquery.tagsinput.min.js"/}
{load href="__STATIC__/plugin/laydate/laydate/laydate.js"/}
<script type="text/javascript">
    var _this;
    var app = new Vue({
        el: '#app',
        data: {
            wid: '{$info.wid}'|| 1,
            extra_wid: '{$info.extra_wid}'|| 0,
            foster_goods_extra:JSON.parse('{:json_encode($foster_goods_extra)}') ||[],
            show:false
        },
        created() {
            _this=this
        },
        methods: {
            addInfo(){
                let id=parseInt(new Date().getTime()*Math.random()*100)
                let res={'lq_time':'','number':'','id':id}
                this.foster_goods_extra.push(res)
            },
            del(index){
                this.foster_goods_extra.splice(index,1)
            },
            showTime(index){
                this.show=true
                let val=this.foster_goods_extra[index]['lq_time']
                setTimeout(()=>{
                    laydate.render({
                        elem:'#choose',
                        theme: 'molv',
                        position: 'static',
                        value: val,
                        type:'datetime',
                        trigger:'click',
                        done: function(value, date, endDate){ // 选择完毕的回调
                            _this.foster_goods_extra[index]['lq_time']=value
                            _this.show=false
                        }
                    })
                },100)
            }
        },
        mounted(){}
    });
    var url = "{:url('Ueditor/index',['savePath'=>'foster_goods'])}";
    var ue = UE.getEditor('content', {
        serverUrl: url,
        zIndex: 999,
        initialFrameWidth: "100%", //初化宽度
        initialFrameHeight: 300, //初化高度
        focus: false, //初始化时，是否让编辑器获得焦点true或false
        maximumWords: 99999, //允许的最大字符数 'fullscreen',
        removeFormatAttributes: 'class,style,lang,width,height,align,hspace,valign',
        pasteplain: false, //是否默认为纯文本粘贴。false为不使用纯文本粘贴，true为使用纯文本粘贴
        autoHeightEnabled: true
    });
    var ue1 = UE.getEditor('goods_agreement', {
        serverUrl: url,
        zIndex: 999,
        initialFrameWidth: "100%", //初化宽度
        initialFrameHeight: 300, //初化高度
        focus: false, //初始化时，是否让编辑器获得焦点true或false
        maximumWords: 99999, //允许的最大字符数 'fullscreen',
        removeFormatAttributes: 'class,style,lang,width,height,align,hspace,valign',
        pasteplain: false, //是否默认为纯文本粘贴。false为不使用纯文本粘贴，true为使用纯文本粘贴
        autoHeightEnabled: true
    });
    function timeRender() {
        lay('.tab-content .lq_time').each(function (e) {
            laydate.render({
                elem:this,
                theme: 'molv', //主题
                type:'datetime',
                trigger:'click'
            })
        })
        $('.tab-content .lq_time').removeAttr('lay-key')
    }
    $(function () {
        // timeRender();
        $('.page-tabs li').on('click', function () {
            if ($(this).hasClass('active')) return;
            var id = $(this).attr('data-id');
            $(this).addClass('active').siblings().removeClass('active');
            $('#' + id).show().siblings().hide();
        });
        $('.submit-btn').click(function () {
            $('span.error').hide();
            $('.form-group').removeClass('has-error');
            var url = "{:url('Goods/add_edit_foster_goods',[$info.pk=>$info[$info.pk]])}";
            var data = $('#submit-form').serialize();
            $.ajax({
                type: "POST",
                url: url,
                data: data,
                dataType: 'json',
                success: function (data) {
                    if (data.code == 1) {
                        showSuccessMsg(data.msg, function () {
                            if (data.data.url) {
                                location.href = data.data.url;
                            }
                        });
                    } else if (data.code == 10) {
                        showErrorMsg(data.msg);
                        $.each(data.data.result, function (index, item) {
                            $('#err_' + index).text(item).show();
                            $('#err_' + index).parent().addClass('has-error');
                        });
                    } else {
                        showErrorMsg(data.msg);
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    showErrorMsg("网络失败，请刷新后重试!");
                }
            });
        });
    });
    function call_back(fileurl_tmp, fileurl_id) {
        $("[name=" + fileurl_id + "]").val(fileurl_tmp);
        $("#" + fileurl_id).attr('src', fileurl_tmp);
    }
    function shanchu(obj) {
        $(obj).parent().remove()
    }
    // 上传商品相册回调函数
    function call_back2(fileurl_tmp) {
        var index=fileurl_tmp.lastIndexOf('.')
        var fileValueSuffix=fileurl_tmp.substr(index+1).toLowerCase()
        var arr=['mp4','3gp'];
        if (arr.includes(fileValueSuffix)){
            var html='<div class="upload-row-item">' +
                '      <video class="upload-video" src="'+fileurl_tmp+'" controls></video>' +
                '      <input type="hidden" name="goods_imgs[]" value="'+fileurl_tmp+'">' +
                '      <button type="button" onclick="shanchu(this)" class="btn btn-default"><span class="mdi mdi-close"></span></button>' +
                '     </div>'
        }else {
            var html='<div class="upload-row-item">' +
                '      <img class="upload-img" src="'+fileurl_tmp+'">' +
                '      <input type="hidden" name="goods_imgs[]" value="'+fileurl_tmp+'">' +
                '      <button type="button" onclick="shanchu(this)" class="btn btn-default"><span class="mdi mdi-close"></span></button>' +
                '     </div>'
        }
        $(".upload-images .add-pic").before(html);
    }
</script>
</body>
</html>
